<template>
<div class="common-body-wrapper">
  <search-header single-width="130" :searchList="searchList" @changeHeight="toRetTable" @confirmSearch="toSearch" @handleChange="handleSearchChange" :isCheckbox="true" :isNeedTree="true" :paramName="paramName" @setSelectedNode="setSelectedNode"></search-header>

  <div class="common-table-tree-wrapper">
    <div class="common-table-wrapper">
      <multi-fun-table :sortColumn='notFormatColumn' :orderType='sortType' :fixed-cols="fixedCols" :is-reset-table="isResetTable" :theads-info="theadsInfo" :tbodys-info="tbodysInfo" @handleMultiCheck="handleMultiCheck" @handleSortColumn="handleSortColumn" @searchFn="getList" @getNextPage="getNextPage">
        <!--按钮-->
        <div class="operate-btn-group" slot="operateBtnGroup">
          <a class="ake_btn ake_btn_text" v-if="isPermmited('REPORT:PAYMENT_NEW:EXPORT')" @click.prevent="exportData()">导出</a>
          <a class="ake_btn ake_btn_text" v-if="isPermmited('REPORT:PAYMENT_NEW:REBUILD')" @click.prevent="reBuild()">重新生成</a>
        </div>

        <!--普通列-->
        <template slot="tdCell" slot-scope="props">

          <el-table-column v-if="props.isMultiHeader" :label="props.label" align="center">
            <template v-for="(item, index) in props.children">
              <el-table-column v-if="item.checked" :key="index" :label="item.text" min-width="30" :prop="item.prop">
                <template slot-scope="scope">
                  <span v-if="item.prop=='payOriginOtherString'">
                    <a class="row-href" v-if="scope.row[item.prop]!=0 && scope.row['parkId'] && scope.row['parkName']" @click="checkPayOriginOtherString(scope.row)">{{scope.row[item.prop]}}</a>
                    <span v-else>{{scope.row[item.prop]}}</span>
                  </span>
                  <span v-else-if="item.prop=='payModeOtherString'">
                    <a class="row-href" v-if="scope.row[item.prop]!=0 && scope.row['parkId'] && scope.row['parkName']"  @click="checkPayModeOtherString(scope.row)">{{scope.row[item.prop]}}</a>
                    <span v-else>{{scope.row[item.prop]}}</span>
                  </span>
                  <span v-else>{{scope.row[item.prop]}}</span>
                </template>
              </el-table-column>
            </template>
          </el-table-column>

          <el-table-column v-else :fixed="props.fixed" :label="props.label" :min-width="props.minWidth" :width="props.width" :prop="props.prop" :sortable="props.sortable">
            <template slot-scope="scope">
              <span v-if="'reno' == props.prop">{{ scope.$index+1 }}</span>
              <span v-else-if="'payParkValue' == props.prop && searchParams.timeDim=='DATE'">
                <a class="imgLink" @click="payParkValueModal_open(scope.$index)">{{scope.row[props.prop] | formatMoney}}</a>
              </span>
              <span v-else-if="'totalHandingCharge' == props.prop">
                {{ scope.row[props.prop] |formatMoney}}
              </span>
              <span v-else-if="'shouldValue' == props.prop">
                {{ scope.row[props.prop] |formatMoney}}
              </span>
              <span v-else>{{ scope.row[props.prop] }}</span>
            </template>
          </el-table-column>
        </template>

        <!--操作列内的按钮-->
        <template slot="operateCell" slot-scope="props">
          <el-table-column :fixed="props.fixed" :label="props.label" min-width="60">
            <template slot-scope="scope">
              <a class="ake_btn ake_btn_text" v-if="isPermmited('REPORT:PAYMENT_NEW:EXPORT_DETAIL') && scope.$index!=0" @click.prevent="exportDataDetail(scope.row)">导出明细</a>
            </template>
          </el-table-column>
        </template>
      </multi-fun-table>

      <table-pagination :size="total" :cur-page="pageNumber" @backData="getPagination"></table-pagination>
    </div>
  </div>

  <!-- 查看其他详情 -->
  <el-dialog :title="otherDetailTitle" :visible.sync="otherDetailVisible" class="zb-dialog">
    <template>
      <el-table :data="otherDetail" border style="width: 100%" :show-header="false">
        <el-table-column prop="typeName" label="">
        </el-table-column>
        <el-table-column prop="realValue" label="">
        </el-table-column>
      </el-table>
    </template>
    <span slot="footer" class="dialog-footer">
      <el-button size="medium" plain @click="otherDetailVisible=false">关 闭</el-button>
    </span>
  </el-dialog>

  <ReBuildBtn ref="myReBuildBtn" :reqUrl="reqUrl" :timeDimensionList="timeDimensionList"></ReBuildBtn>
</div>
</template>

<script>
import common from "@mixins/common.js";
import stardardList from "@mixins/tables/stardardList.js";

//modal
import invokeModal from "@mixins/modal/invokeModal.js";

// 引进vue的js
import payment_report_new from "./js/payment_report_new.js";
import ReBuildBtn from "@components/reBuildBtn/index.vue";

export default {
  name: 'tmpCharge',
  mixins: [common, stardardList, invokeModal, payment_report_new],
  components: {
    ReBuildBtn: ReBuildBtn
  },
  data() {
    var today = [new Date(moment().subtract('days', 1).format("YYYY-MM-DD 00:00:00")), new Date(moment().subtract('days', 1).format("YYYY-MM-DD 23:59:59"))];
    return {
      reqUrl: '/report/payment/newRebuild.do',
      timeDimensionList: [{
          name: "日报",
          value: "date"
        },
        {
          name: "月报",
          value: "month"
        },
      ],
      total: 0,
      fixedCols: 2,
      paramName: "query_parkId",
      searchList: [{
          index: 0,
          isShow: false,
          type: "select",
          name: "timeDim",
          text: "时间维度",
          value: "DATE",
          isHandleChange: true,
          options: [{
              name: "日报",
              value: "DATE"
            },
            {
              name: "月报",
              value: "MONTH"
            },
            {
              name: "年报",
              value: "YEAR"
            }
          ]
        },
        {
          index: 1,
          isShow: false,
          type: "datePicker",
          pickerType: "daterange",
          format: "yyyy-MM-dd",
          name: "query_chargeDate",
          propName: "query_chargeDateStart,query_chargeDateEnd",
          text: "时间区间",
          value: today,
          style: {
            width: "360px"
          }
        }
      ],
      theadsInfo: [{
          index: 1,
          isShow: false,
          prop: "statDim",
          text: "日期",
          minWidth: 40
        },
        {
          index: 2,
          isShow: false,
          prop: "parkName",
          text: "停车场",
          minWidth: 90
        },
        {
          index: 3,
          isShow: false,
          text: "支付来源，金额（次数）",
          minWidth: 300,
          isMultiHeader: true,
          children: [{
              index: 0,
              isShow: false,
              prop: "payOriginString",
              text: "总"
            },
            {
              index: 1,
              isShow: false,
              prop: "payOriginCenterString",
              text: "中央收费"
            },
            {
              index: 2,
              isShow: false,
              prop: "payOriginInoutString",
              text: "岗亭收费"
            },
            {
              index: 3,
              isShow: false,
              prop: "payOriginOnlineString",
              text: "线上收费"
            },
            {
              index: 4,
              isShow: false,
              prop: "payOriginOtherString",
              text: "其他"
            }
          ]
        },
        {
          index: 4,
          isShow: false,
          text: "支付方式，金额(次数)",
          minWidth: 400,
          isMultiHeader: true,
          children: [{
              index: 0,
              isShow: false,
              prop: "payModeString",
              text: "总"
            },
            {
              index: 1,
              isShow: false,
              prop: "payModeCashString",
              text: "现金"
            },
            {
              index: 2,
              isShow: false,
              prop: "payModeWeixinString",
              text: "微信"
            },
            {
              index: 3,
              isShow: false,
              prop: "payModeWeixinNoFreeString",
              text: "微信无感"
            },
            {
              index: 4,
              isShow: false,
              prop: "payModeAliString",
              text: "支付宝"
            },
            {
              index: 5,
              isShow: false,
              prop: "payModeAliNoFreeString",
              text: "支付宝无感"
            },
            {
              index: 6,
              isShow: false,
              prop: "payModeOtherString",
              text: "其他"
            }
          ]
        }
      ],
      tbodysInfo: []
    };
  }
};
</script>

<style lang="less" scoped>
.row-href{
  cursor: pointer;
}
.user-row-modal {
  .modal-body {
    min-height: 400px;
  }

  .first-item {
    width: 240px;
  }
}

.role-select {
  width: 240px;
}
</style>
